<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/icon/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        /* 背景图片样式 */
        .image-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        /* 背景视频样式 */
        /*.video-background {*/
        /*    position: fixed;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    object-fit: cover;*/
        /*    z-index: -1;*/
        /*}*/

        /* 为页面内容设置半透明背景 */
        .content-wrapper {
            position: relative;
            z-index: 1;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
        }

        .btn-purple {
            background-color: purple;
            color: white;
        }

        .btn-purple:hover {
            background-color: darkviolet;
        }

        .register-link a {
            color: inherit;
        }

        footer a {
            color: inherit; /* 继承父元素的颜色，这里是白色 */
        }

        footer {
            text-decoration: none;
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
<!-- 添加背景视频 -->
<%--<video class="video-background" autoplay loop muted>--%>
<%--    <source src="${pageContext.request.contextPath}/static/video/wall.mp4" type="video/mp4">--%>
<%--    您的浏览器不支持 HTML5 视频。--%>
<%--</video>--%>
<!-- 替换为背景图片 -->
<img src="${pageContext.request.contextPath}/static/img/wall2.png" alt="Background" class="image-background">

<div class="container d-flex align-items-center justify-content-center" style="height: 90vh;">
    <div class="card p-4 shadow" style="max-width: 400px; width: 100%;">
        <h3 class="text-center mb-4">Login</h3>
        <form action="${pageContext.request.contextPath}/loginSuccess.action" method="post">
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                    <input type="text" class="form-control" id="username" name="username" required>
                </div>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>
            </div>
            <button type="submit" class="btn btn-purple w-100">Login</button>
        </form>
        <div class="register-link text-center">
            Don't have an account? <a href="${pageContext.request.contextPath}/register.action">Register here</a>
        </div>
    </div>
</div>
<footer>&copy; 2024 <a href="http://sasioverlxrd.cn/">sasioverlxrd.cn</a>. All rights reserved. author
    <a href="https://github.com/uuo00n">uu</a></footer>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath}/static/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/login.js"></script>
</body>
</html>
